/**
 * 
 * @authors xuxinjiang (565657400@qq.com)
 * @date    2019-08-09 17:00:14
 * @version $Id$
 */
const path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
const config = require("./config.js");
const MiniCssExtract = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //样式压缩插件
const TerserJSPlugin = require('terser-webpack-plugin'); //js 压缩插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清楚文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var pluginsArr = [];
config.html.forEach((item, index)=> {
    item.minify = {
        removeAttributeQuotes: true, // 是否去除文件中的双引号
        collapseWhitespace: true // 是否去除文件中的空行
    }
    pluginsArr.push(new HtmlWebpackPlugin(item));
});
module.exports = {
    optimization: { // 配置webpack的优化项
        minimizer: [ // 配置最小值优化项
            new OptimizeCSSAssetsPlugin(), // 声明css优化插件的实例
            new TerserJSPlugin() // 声明js压缩插件的实例
        ]
    },
    mode: "production",
    entry: config.entry,
    output: {
        filename: "static/js/[name].js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "./"
    },
    plugins: [
        ...pluginsArr,
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(), //清除文件夹内容
        new MiniCssExtract({ // 创建该插件的实例
            filename: 'static/css/main.css' // 指定输出的css文件的文件名
        })
        
    ],
    module: { // 配置 webpack 使用到的模块
        rules: [{
            test: /\.css$/, // 针对 .css 结尾的文件，使用下面的loader进行处理
            use: [
                MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中,,
                'css-loader',
                'postcss-loader' // 给CSS3属性添加前缀
            ]
        },{
            test: /\.scss$/,
            use: [
                MiniCssExtract.loader,
                'css-loader',
                'sass-loader',
                'postcss-loader' // 给CSS3属性添加前缀
            ]
        }, {
            test: /\.js$/, // 匹配js文件，然后用下面所配置的工具对这些文件进行编译处理
            use: {
                loader: 'babel-loader', // babel的核心模块
                options: {
                    presets: [
                        '@babel/preset-env'
                    ],
                    plugins: [ // 配置babel插件，转换更更高版本语法
                        '@babel/plugin-proposal-class-properties',
                        '@babel/plugin-transform-runtime' // 配置运行时的转换插件
                    ]
                }
            },
            include: path.resolve(__dirname, 'src') // 只转换src目录下的代码
        }, {
            test: /\.(png|jpg|jpeg|gif|svg)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 2 * 1024, // 小于2k的图片，直接使用Base64编码进行处理
                    name: 'static/images/[name].[ext]',
                    esModule: false
                }
            }
        },{
            test: /\.(html)$/,
            use: {
                loader: 'html-loader',
                options: {
                }
            }
        },{
            test: /\.vue$/,
            use: "vue-loader"
        }],
    },
    resolve: {
        extensions: ['*','.js','.vue','.json']
    }

}